<template>
  <div class="top_menu">
    <!-- 车务管理 -->
    <div class="public" @mouseenter="trafficManger = true" @mouseleave="trafficManger = false">
      <span>车务管理</span>
      <div class="work_area_list view_list" v-if="trafficManger">
        <span @click="carInformation.show = true">车辆基础信息</span>
        <span>车检记录</span>
        <span>车险记录</span>
        <span>维修记录</span>
        <span>保养记录</span>
        <span>加油记录</span>
        <span>违章记录</span>
        <span>违规记录</span>
        <span>加水记录</span>
      </div>
    </div>
    <!-- 司机管理 -->
    <div class="public" @mouseenter="driverManage = true" @mouseleave="driverManage = false">
      <span>司机管理</span>
      <div class="work_area_list view_list" v-if="driverManage">
        <span>司机基本信息</span>
        <span>驾驶记录</span>
        <span>违章记录</span>
        <span>违规记录</span>
      </div>
    </div>
    <!-- 行驶规定 -->
    <div class="public" @mouseenter="driving = true" @mouseleave="driving = false">
      <span>行驶规定</span>
      <div class="work_area_list" v-if="driving">
        <span>工作区域</span>
        <span>超速规定</span>
      </div>
    </div>
    <!-- 费用油耗加水统计 -->
    <div class="public" @mouseenter="addWater = true" @mouseleave="addWater = false">
      <span>费用油耗加水统计</span>
      <div class="work_area_list" v-if="addWater" style="min-width: 180px;">
        <span>单一车辆费用统计</span>
        <span>全部车辆费用统计</span>
        <span>综合费用统计</span>
        <span>单一车辆油耗里程统计</span>
        <span>全部车辆油耗里程统计</span>
        <span>油耗里程综合统计</span>
        <span>单一车辆加水统计</span>
        <span>全部车辆加水统计</span>
        <span>加水综合统计</span>
        <span>车辆用车统计</span>
        <span>司机出车统计</span>
      </div>
    </div>

    <!-- 车辆基础信息 -->
    <div class="organization carInformation" v-if="carInformation.show">
      <h2>
        <span class="iconfont icon-index-infor-"></span>
        <span>车辆基础信息</span>
        <i class="iconfont icon-guanbi" @click="carInformation.show = false"></i>
      </h2>
      <div class="organization_content"></div>
    </div>
    <!-- <div ref='selectBox' class='select_box' v-show='selectBox'>
      <span @click='addNewOrganization' v-show='addShow'>添加班组</span>
      <span @click='editNewOrganization' v-show='editShow'>编辑班组</span>
      <span @click='deleteOrganization' v-show='editShow'>删除班组</span>
    </div>-->
    <!-- 人员管理 -->
    <div class="organization person_m" v-if="person.show">
      <h2>
        <span class="iconfont icon-Group"></span>
        <span>人员管理</span>
        <i class="iconfont icon-guanbi" @click="closePersonManage"></i>
      </h2>
      <div class="top_box">
        <el-form :inline="true" :model="person" class="demo-form-inline">
          <el-form-item label="姓名：">
            <el-input v-model="person.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="班组：">
            <el-select v-model="person.client" placeholder="班组">
              <el-option
                v-for="item in person.clientList"
                :key="item.CLIENT_NO"
                :label="item.CLIENT_NAME"
                :value="item.CLIENT_NO"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <span style="color: #666;">记录数量：{{person.dataList.length}}&nbsp;条</span>
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button type="primary" @click="personQuery">查 询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="addNewPerson">新 增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="deletePerson">删 除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="person_content">
        <!-- 人员管理列表 -->
        <el-table
          :data="person.dataList"
          style="width: 100%"
          border
          highlight-current-row
          v-if="person.listShow"
          @cell-mouse-enter="cellMouseEnter"
          @row-click="rowClick"
          @row-dblclick="editPerson"
        >
          <el-table-column prop="VID" label="人员ID" align="center"></el-table-column>
          <el-table-column prop="NAME" label="姓名" align="center"></el-table-column>
          <el-table-column prop="SIMCARD_NO" label="通讯卡号" align="center"></el-table-column>
          <el-table-column prop="CLIENT_NO" label="班组编号" align="center"></el-table-column>
          <el-table-column prop="CLIENT_NO" label="班组" align="center"></el-table-column>
          <el-table-column prop="SEX" label="性别" align="center"></el-table-column>
          <el-table-column prop="PHONE" label="电话" align="center"></el-table-column>
          <el-table-column prop="WORKTYPE" label="工种" align="center"></el-table-column>
          <el-table-column prop="BIRTHDAY" label="生日" align="center"></el-table-column>
          <el-table-column prop="WORKDATE" label="入职时间" align="center"></el-table-column>
        </el-table>
        <!-- 新增人员 -->
        <div class="new_person" v-if="newPersonForm.show">
          <h2>
            <span class="iconfont icon-xinzengrenyuan--"></span>
            <span>新增人员</span>
            <span
              class="iconfont icon-guanbi"
              @click="newPersonForm.show = false, person.listShow = true"
            ></span>
          </h2>
          <el-form
            ref="newPersonForm"
            :model="newPersonForm"
            v-model="newPersonForm"
            label-width="80px"
            :rules="rules"
            inline-message
          >
            <el-form-item prop="Name" label="姓名">
              <el-input v-model="newPersonForm.Name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item prop="Phone" label="电话号码">
              <el-input
                v-model="newPersonForm.Phone"
                placeholder="请输入电话"
                maxlength="11"
                oninput="value=value.replace(/[^\d]/g,'')"
              ></el-input>
            </el-form-item>
            <el-form-item label="通讯编号">
              <el-input v-model="newPersonForm.SimCardNo" placeholder="请输入通讯编号"></el-input>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-date-picker
                v-model="newPersonForm.BirhDay"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择出生日期"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="入职时间">
              <el-date-picker
                v-model="newPersonForm.WorkDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择入职时间"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
            <el-form-item prop="Sex" label="性别">
              <el-radio v-model="newPersonForm.Sex" label="男">男</el-radio>
              <el-radio v-model="newPersonForm.Sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item prop="WorkType" label="工种">
              <el-select v-model="newPersonForm.WorkType" placeholder="请选择工种">
                <el-option value="班组长"></el-option>
                <el-option value="环卫工"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="ClientNo" label="班组">
              <el-select v-model="newPersonForm.ClientNo" placeholder="请选择班组">
                <el-option
                  v-for="item in person.clientList"
                  :key="item.CLIENT_NO"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                />
              </el-select>
            </el-form-item>
            <div class="btns">
              <el-button
                type="primary"
                @click="addPerson('newPersonForm')"
                v-if="!editPersonShow"
              >确定</el-button>
              <el-button
                type="primary"
                @click="saveEditPerson('newPersonForm')"
                v-if="editPersonShow"
              >保存</el-button>
              <el-button type="success" @click="resetForm('newPersonForm')">重置</el-button>
              <el-button
                type="danger"
                @click="newPersonForm.show = false, person.listShow = true"
              >取消</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>

    <!-- 临时任务 -->
    <div class="organization" v-if="temporaryTaskShow">
      <h2>
        <span class="iconfont icon-pcicon-"></span>
        <span>临时任务</span>
        <i class="iconfont icon-guanbi" @click="closeTemporaryTask"></i>
      </h2>
    </div>

    <!-- 作业反馈 -->
    <div class="organization" v-if="HFShow">
      <h2>
        <span class="iconfont icon-pcicon-"></span>
        <span>临时任务</span>
        <i class="iconfont icon-guanbi" @click="closeHomeworkFeedback"></i>
      </h2>
    </div>

    <!-- 考勤管理--设置时间 -->
    <div class="organization attendance" v-if="attendance.workTime.show">
      <h2>
        <span class="iconfont icon-shijian"></span>
        <span>上下班时间设置</span>
        <i class="iconfont icon-guanbi" @click="closeWorkTime"></i>
      </h2>
      <div class="attendance_content">
        <el-form :model="attendance.workTime" class="demo-form-inline">
          <el-form-item label="上午：">
            <el-time-picker
              is-range
              v-model="attendance.workTime.am"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              value-format="hh:mm"
            ></el-time-picker>
          </el-form-item>
          <el-form-item label="下午：">
            <el-time-picker
              is-range
              v-model="attendance.workTime.pm"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              value-format="hh:mm"
            ></el-time-picker>
          </el-form-item>
          <div class="attendance_btns">
            <el-button type="primary" @click="setWorkingHours">修 改</el-button>
            <el-button type="danger" @click="closeWorkTime">关 闭</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <!-- 考勤管理--记录 -->
    <div class="organization attendance_records" v-if="attendance.records.show">
      <h2>
        <span class="iconfont icon-icon-xin_kaoqinjilu"></span>
        <span>考勤记录</span>
        <i class="iconfont icon-guanbi" @click="closeAttendanceRecords"></i>
      </h2>
      <div class="attendance_records_content">
        <div class="top_box">
          <el-form inline :model="attendance.records" class="demo-form-inline">
            <el-form-item label="日期：">
              <el-date-picker
                v-model="attendance.records.date"
                type="date"
                placeholder="请选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="班组：">
              <el-select v-model="attendance.records.teamValue" placeholder="请选择班组">
                <el-option
                  v-for="item in attendance.records.teamList"
                  :key="item.CLIENT_NO"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item>
            <div class="records_btns">
              <el-button type="primary" @click="queryAttendanceList">查 询</el-button>
              <el-button type="success">导 出</el-button>
            </div>
          </el-form>
          <div class="bottom_box">
            <span>
              上午迟到：
              <span>{{attendance.amLate}}</span>
              <i></i>
            </span>
            <span>
              上午早退：
              <span>{{attendance.amLeaveEarly}}</span>
              <i></i>
            </span>
            <span>
              下午迟到：
              <span>{{attendance.pmLate}}</span>
              <i></i>
            </span>
            <span>
              下午早退：
              <span>{{attendance.pmLeaveEarly}}</span>
              <i></i>
            </span>
            <span>
              正常：
              <span>{{attendance.normal}}</span>
              <i></i>
            </span>
            <span>
              缺卡：
              <span>{{attendance.absenteeism}}</span>
            </span>
          </div>
        </div>
        <div class="table_list">
          <el-table :data="attendance.attendanceList" style="width: 100%" fit border>
            <el-table-column prop="姓名" label="姓名" align="center"></el-table-column>
            <el-table-column prop="清运队" label="清运队" align="center"></el-table-column>
            <el-table-column prop="班组" label="班组" align="center"></el-table-column>
            <el-table-column prop="作业范围" label="作业范围" align="center"></el-table-column>
            <el-table-column prop="上午签入" label="上午签入" align="center"></el-table-column>
            <el-table-column prop="上午签出" label="上午签出" align="center"></el-table-column>
            <el-table-column prop="下午签入" label="下午签入" align="center"></el-table-column>
            <el-table-column prop="下午签出" label="下午签出" align="center"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import eventBus from '@/eventBus.js'

export default {
  data () {
    return {
      trafficManger: false,
      driverManage: false,
      driving: false,
      addWater: false,

      carInformation: {
        show: false
      },
      // 组织机构
      organization: {
        show: false,
        list: []
      },
      // 添加班组
      addOrganization: {
        show: false,
        addRules: {
          name: [{ required: true, message: '请输入机构名称', trigger: 'blur' }]
        },
        form: {
          name: '',
          attribute: '',
          preName: '',
          ParentNo: 0
        }
      },
      // 编辑班组
      editOrganization: {
        show: false,
        form: {
          name: '',
          clientNo: '',
          PARENT_NO: ''
        }
      },
      addShow: false,
      editShow: false,
      // 人员管理
      person: {
        show: false,
        name: '',
        client: '',
        clientList: [],
        dataList: [],
        listShow: true
      },
      // 新增人员
      newPersonForm: {
        show: false,
        Name: '',
        Phone: '',
        SimCardNo: '',
        BirhDay: '',
        WorkDate: '',
        Sex: '男',
        WorkType: '',
        ClientNo: ''
      },
      editPersonShow: false,
      workAreaListShow: false,
      temporaryTaskShow: false,
      HFShow: false,
      amListShow: false,
      viewListShow: false,
      plugMShow: false,
      selectBox: false,
      rules: {
        Name: [
          {
            required: true,
            validator: this.checkName,
            message: this.errorMessage,
            trigger: 'blur'
          }
        ],
        Phone: [
          {
            required: true,
            validator: this.checkPhone,
            message: this.errorMessage,
            trigger: 'blur'
          }
        ],
        Sex: [{ required: true, message: ' ', trigger: 'blur' }],
        WorkType: [{ required: true, message: ' ', trigger: 'blur' }],
        ClientNo: [{ required: true, message: ' ', trigger: 'blur' }]
      },
      // newPersonShow: false,
      errorMessage: ' ',
      personVID: '',
      // 考勤管理
      attendance: {
        workTime: {
          show: false,
          am: '',
          pm: ''
        },
        records: {
          show: false,
          date: '',
          teamValue: '',
          teamList: []
        },
        attendanceList: [],
        amLate: 0,
        amLeaveEarly: 0,
        pmLate: 0,
        pmLeaveEarly: 0,
        normal: 0,
        absenteeism: 0
      }
    }
  },
  created () {
    eventBus.$on('closeCover', val => (this.organization.show = val))
    eventBus.$on('closeCover', val => (this.person.show = val))
    eventBus.$on('closeCover', val => (this.temporaryTaskShow = val))
    eventBus.$on('closeCover', val => (this.HFShow = val))
    // eventBus.$on('closeCover', val => this.plugMShow = val)
    eventBus.$on('closeCover', val => (this.attendance.records.show = val))
    eventBus.$on('closeCover', val => (this.attendance.workTime.show = val))
    // eventBus.$on('urlParams', val => this.account = val)
  },
  methods: {
    // 鼠标进入单元格显示其内容
    cellMouseEnter (row, column, cell, event) {
      cell.setAttribute('title', cell.innerText)
    },
    // 打开组织机构
    // openOrganization () {
    //   this.organization.show = true;
    //   eventBus.$emit('isCover', true);
    //   // this.getOrganizationList();
    // },
    // 关闭组织机构
    // closeOrganization () {
    //   this.organization.show = false;
    //   eventBus.$emit('isCover', false);
    // },
    // 打开人员管理
    personManage () {
      this.person.show = true
      eventBus.$emit('isCover', true)
      this.getPersonList()
    },
    // 关闭人员管理
    closePersonManage () {
      this.person.show = false
      this.newPersonForm.show = false
      this.person.listShow = true
      eventBus.$emit('isCover', false)
    },
    // 临时任务
    temporaryTask () {
      this.temporaryTaskShow = true
      eventBus.$emit('isCover', true)
    },
    // 关闭临时任务
    closeTemporaryTask () {
      this.temporaryTaskShow = false
      eventBus.$emit('isCover', false)
    },
    // 作业反馈
    homeworkFeedback () {
      this.HFShow = true
      eventBus.$emit('isCover', true)
    },
    // 关闭作业反馈
    closeHomeworkFeedback () {
      this.HFShow = false
      eventBus.$emit('isCover', false)
    },
    // 人员管理列表
    async getPersonList () {
      const { data } = await this.$Http.get(
        `/DataListCompany/GetWorkerListApi?ClientNo=${this.$route.query.ClientNo}`
      )
      this.person.dataList = data
      // 获取分组
      const groupData = await this.$Http.get(
        `/DataListCompany/GetTeamListApi?ClientNo=${this.$route.query.ClientNo}`
      )
      this.person.clientList = groupData.data
    },
    // 人员管理查询
    personQuery () {
      const { name, client } = this.person
      if (name) this.person.dataList = this.person.dataList.filter(item => name === item.NAME)
      if (client) this.person.dataList = this.person.dataList.filter(item => client === item.CLIENT_NO)
    },
    // 新增人员
    addNewPerson () {
      this.editPersonShow = false
      this.person.listShow = false
      this.newPersonForm = {
        show: true,
        Name: '',
        Phone: '',
        SimCardNo: '',
        BirhDay: '',
        WorkDate: '',
        Sex: '男',
        WorkType: '',
        ClientNo: ''
      }
    },
    async addPerson (formName) {
      for (const k in this.newPersonForm) {
        if (this.newPersonForm[k] === '') {
          this.$message({
            message: '表单项不能为空！！',
            type: 'warning'
          })
          return false
        }
      }
      const { data } = await this.$Http.get('/DataListCompany/AddWorkerApi', {
        params: this.newPersonForm
      })
      if (data.Message) {
        this.$message({
          message: data.Message,
          type: 'warning'
        })
        return false
      }
      this.newPersonForm.show = false
      this.person.listShow = true
      this.getPersonList()
      this.resetForm('newPersonForm')
    },
    // 重置新增人员表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
      // this.newPersonForm.SimCardNo = ''
      // this.newPersonForm.BirhDay = ''
      // this.newPersonForm.WorkDate = ''
      this.newPersonForm = {
        show: true,
        Name: '',
        Phone: '',
        SimCardNo: '',
        BirhDay: '',
        WorkDate: '',
        Sex: '男',
        WorkType: '',
        ClientNo: ''
      }
    },
    // 校验手机号格式
    checkPhone (rule, value, callback) {
      if (value === '') callback(new Error('请输入手机号'))
      if (/^1[34578]\d{9}$/.test(value) === false) callback(new Error('请输入正确的手机号'))
    },
    // 校验姓名格式
    checkName (rule, value, callback) {
      const ren = /((^[\u4E00-\u9FA5]{2,5}$)|(^[a-zA-Z]+[\s.]?([a-zA-Z]+[\s.]?){0,4}[a-zA-Z]$))/
      if (value === '') callback(new Error('请输入姓名'))
      if (value.length < 2) callback(new Error('请输入姓名'))
      if (!ren.test(value)) callback(new Error('姓名只能是汉字'))
      if (value.length >= 5) callback(new Error('姓名过长'))
    },
    // 人员管理--编辑人员--双击某一行
    editPerson (row, column, event) {
      this.editPersonShow = true
      this.newPersonForm.show = true
      this.person.listShow = false
      this.newPersonForm = {
        show: true,
        Name: row.NAME,
        Phone: row.PHONE,
        SimCardNo: row.SIMCARD_NO,
        BirhDay: row.BIRTHDAY.split('T')[0],
        WorkDate: row.WORKDATE.split('T')[0],
        Sex: '男',
        WorkType: row.WORKTYPE,
        ClientNo: row.CLIENT_NO,
        VID: row.VID
      }
    },
    // 保存编辑人员
    async saveEditPerson () {
      for (const k in this.newPersonForm) {
        if (this.newPersonForm[k] === '') {
          this.$message({
            message: '表单项不能为空！！',
            type: 'warning'
          })
          return false
        }
      }
      const {
        Name,
        Phone,
        SimCardNo,
        BirhDay,
        WorkDate,
        Sex,
        WorkType,
        ClientNo,
        VID
      } = this.newPersonForm
      const params = {
        Name,
        SimCardNo,
        ClientNo,
        Phone,
        Sex,
        WorkType,
        BirhDay,
        WorkDate,
        VID
      }
      const { data } = await this.$Http.get(
        '/DataListCompany/UpdateWorkerApi',
        { params }
      )
      if (data.IsSucess) {
        this.$message({
          message: '保存成功！！！',
          type: 'success'
        })
        this.newPersonForm.show = false
        this.person.listShow = true
        this.getPersonList()
        this.resetForm('newPersonForm')
      } else {
        this.$message({
          message: '保存失败！！！',
          type: 'warning'
        })
      }
    },
    // 人员管理--删除人员
    rowClick (row, column, event) {
      this.personVID = row.VID
    },
    async deletePerson () {
      await this.$Http.get(
        `/DataListCompany/DeleteWorkerApi?VID=${this.personVID}`
      )
    },
    // 考勤管理--打开设定工作时间
    openWorkTime () {
      this.attendance.workTime.show = true
      eventBus.$emit('isCover', true)
      this.attendance.workTime.am = ''
      this.attendance.workTime.pm = ''
      this.amListShow = false
    },
    // 考勤管理--关闭设定工作时间
    closeWorkTime () {
      this.attendance.workTime.show = false
      eventBus.$emit('isCover', false)
    },
    // 考勤管理--设定工作时间
    setWorkingHours () {
      const params = {
        AmIn: this.attendance.workTime.am[0],
        AmOut: this.attendance.workTime.am[1],
        PmIn: this.attendance.workTime.pm[0],
        PmOut: this.attendance.workTime.pm[1],
        ClientNo: this.editOrganization.form.clientNo
      }
      this.$Http.get('/DataListCompany/UpdateWorkerWorkTimeApi', { params })
      this.attendance.workTime.show = false
      this.$message({
        showClose: true,
        message: '修改成功！！！',
        type: 'success'
      })
    },
    // 考勤管理--打开考勤记录
    openAttendanceRecords () {
      eventBus.$emit('isCover', true)
      this.attendance.records.show = true
      this.amListShow = false
      this.getTeamList()
      this.attendance.records.teamValue = this.$route.query.ClientNo
      const date = new Date().toLocaleDateString().split('/')
      if (date[1].length === 1) date[1] = '0' + date[1]
      if (date[2].length === 1) date[2] = '0' + date[2]
      this.attendance.records.date = date.join('-')
      this.queryAttendanceList()
    },
    // 考勤管理--关闭考勤记录
    closeAttendanceRecords () {
      this.attendance.records.show = false
      eventBus.$emit('isCover', false)
    },
    // 考勤管理--班组列表
    async getTeamList () {
      const { data } = await this.$Http.get(
        `/DataListCompany/GetCleanerGroupListApi?ClientNo=${this.$route.query.ClientNo}`
      )
      this.attendance.records.teamList = data
    },
    // 考勤管理--查询考勤记录列表
    async queryAttendanceList () {
      const params = {
        ClientNo: this.attendance.records.teamValue,
        workDate: this.attendance.records.date
      }
      const { data } = await this.$Http.get(
        '/DataListCompany/GetAttendanceApi',
        { params }
      )

      this.attendance.amLate = 0
      this.attendance.amLeaveEarly = 0
      this.attendance.pmLate = 0
      this.attendance.pmLeaveEarly = 0

      data.forEach(item => {
        if (item.上午签入 === '迟到') this.attendance.amLate++
        if (item.上午签出 === '早退') this.attendance.amLeaveEarly++
        if (item.下午签入 === '迟到') this.attendance.pmLate++
        if (item.下午签出 === '早退') this.attendance.pmLeaveEarly++
        // this.attendance.normal
        // this.attendance.absenteeis
      })

      this.attendance.attendanceList = data
    }
  }
}
</script>

<style scoped lang='less'>
.top_menu {
  height: 30px;
  color: #fff;
  background-color: #3baefa;
  display: flex;
  align-items: center;
  padding-left: 10px;
  .public {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
    position: relative;
    cursor: default;
    & > span:hover {
      color: #eee;
    }
  }
  .select_box {
    position: absolute;
    width: 100px;
    z-index: 99;
    border: 1px solid #ccc;
    background-color: #fff;
    span {
      display: block;
      line-height: 26px;
      text-align: center;
      color: #333;
      &:hover {
        color: #fff;
        background-color: #409eff;
        cursor: pointer;
      }
    }
  }
  .organization {
    width: 800px;
    height: 460px;
    padding: 0;
    padding-bottom: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    position: absolute;
    left: 50%;
    top: 130px;
    transform: translateX(-50%);
    z-index: 99;
    h2 {
      line-height: 30px;
      border-bottom: 1px solid #ccc;
      padding-left: 10px;
      color: #666;
      span {
        margin-right: 5px;
      }
      i {
        float: right;
        margin-right: 10px;
      }
    }
    .organization_content {
      height: calc(~"100% - 33px");
    }
  }
  .person_m {
    width: 1000px;
    height: 545px;
    .top_box {
      height: 30px;
      border-bottom: 1px solid #ccc;
      display: flex;
      align-items: center;
      padding-left: 20px;
      .el-form {
        height: 26px;
        .el-input {
          width: 100px;
        }
        .el-select {
          width: 150px;
        }
        /deep/.el-form-item {
          vertical-align: baseline;
          .el-button /deep/ span {
            margin-left: 0;
          }
        }
      }
    }
    .person_content {
      height: 492px;
      overflow-y: auto;
      .new_person {
        width: 400px;
        height: 450px;
        border: 1px solid #ccc;
        border-radius: 8px;
        margin: 15px auto;
        box-shadow: 0 0 5px 2px #ccc;
        .icon-guanbi {
          float: right;
          margin-right: 10px;
        }
        .el-form {
          width: 260px;
          height: 180px;
          margin: 10px auto;
          background-color: #fff;
          .el-form-item {
            margin-bottom: 20px;
          }
          .btns {
            display: flex;
            align-items: center;
            justify-content: center;
            // padding-top: 10px;
            .el-button {
              margin: 0 10px;
              /deep/span {
                padding: 0 5px;
              }
            }
          }
        }
      }
    }
  }
  .attendance {
    width: 500px;
    height: 260px;
    .attendance_content {
      .el-form {
        width: 400px;
        margin: 50px auto;
        .el-form-item {
          margin-bottom: 30px;
        }
        /deep/.el-date-editor .el-range__icon {
          line-height: 18px;
        }
        /deep/.el-date-editor .el-range-separator {
          line-height: 18px;
        }
        .attendance_btns {
          margin-top: 40px;
          text-align: center;
          .el-button {
            display: inline-block;
            padding: 0 10px;
            margin: 0 20px;
          }
        }
      }
    }
  }
  .attendance_records {
    width: 900px;
    .top_box {
      height: 60px;
      padding-left: 20px;
      border-bottom: 1px solid #ccc;
      .el-form {
        margin: 5px 0;
        display: flex;
        align-items: center;
      }
      .el-form-item {
        width: 200px;
        margin: 0;
        margin-right: 20px;
        /deep/.el-date-editor.el-input {
          width: 152px;
        }
        .el-select {
          width: 152px;
        }
      }
      .records_btns {
        margin-left: 20px;
        .el-button {
          display: inline-block;
          margin-right: 20px;
          padding: 0 5px;
        }
      }
    }
    .bottom_box {
      color: #333;
      padding-top: 5px;
      & > span {
        padding-right: 5px;
        display: inline-block;
        &:last-child {
          border: 0 none;
        }
        span {
          padding: 0 2px;
          border-bottom: 1px solid #ccc;
        }
        i {
          display: inline-block;
          width: 2px;
          height: 12px;
          background-color: #999;
          margin-left: 8px;
        }
      }
    }
    .attendance_records_content {
      height: calc(~"100% - 32px");
      .table_list {
        height: calc(~"100% - 60px");
        overflow-y: auto;
      }
    }
  }
  .work_area_list {
    min-width: 140px;
    // height: 78px;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
    position: absolute;
    top: 30px;
    z-index: 22;
    span {
      display: block;
      padding: 0 10px 0 20px;
      line-height: 26px;
      color: #333;
      &:hover {
        color: #fff;
        background-color: #2ea9fa;
      }
    }
  }
  .am_list {
    width: 120px;
  }
  .view_list {
    // width: 138px;
    // height: 286px;
    // .icon-you {
    //   float: right;
    // }
  }
}
</style>
